<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>进度条特效</title>
    <style>
        *{margin: 0; padding: 0; border: 0;}
        #progress{
            width: 1000px;
            height: 35px;
            line-height: 35px;
            /*background-color: #e8e8e8;*/
            margin: 100px auto;

            position: relative;
        }

        #progress_bar{
            width: 900px;
            height: 100%;
            background-color: #ccc;
            border-radius: 8px;

            position: relative;
        }

        #progress_value{
            position: absolute;
            right: 30px;
            top: 0;
        }

        #progress_bar_fg{
            width: 0;
            height: 100%;
            background-color: orangered;
            border-top-left-radius: 8px;
            border-bottom-left-radius: 8px;
        }

        span{
            width: 25px;
            height: 49px;
            background-color: orangered;

            position: absolute;
            left: 0;
            top:-7px;
            border-radius: 5px;

            cursor: pointer;
        }
    </style>
</head>
<body>
    <div id="progress">
        <div id="progress_bar">
            <div id="progress_bar_fg"></div>
            <span></span>
        </div>
        <div id="progress_value">%0</div>
    </div>
<script>
    window.onload = function () {
        //1. 获取需要的标签
        var progress = document.getElementById('progress');
        var progress_bar = progress.children[0];
        var progress_bar_fg = progress_bar.children[0];
        var mask = progress_bar.children[1];
        var progress_value =  progress.children[1];

        // 2.监听鼠标的点击事件
        mask.onmousedown = function (event) {
             var event = event || window.event;
             // 2.1 求出左边的初始距离
             var offsetLeft = event.clientX - mask.offsetLeft;
//             console.log('clientX'+event.clientX,'mask.offsetLeft'+mask.offsetLeft,'offsetLeft'+offsetLeft);

             // 2.2 监听鼠标的移动事件
             document.onmousemove = function (event) {
                 var event = event || window.event;
                 // 2.2.1 求出走过的距离
                 var x = event.clientX - offsetLeft;
//                 console.log('clientX'+event.clientX,'mask.offsetLeft'+offsetLeft,'x'+x);
                 // 2.2.2 处理边界值
                 if(x < 0){
                     x = 0;
                 }else if(x >= progress_bar.offsetWidth - mask.offsetWidth){
                     x = progress_bar.offsetWidth - mask.offsetWidth;
                 }

                 // 2.2.3 走起来
                 mask.style.left = x + 'px';
                 progress_bar_fg.style.width = x + 'px';
                 progress_value.innerHTML = parseInt(x / (progress_bar.offsetWidth - mask.offsetWidth) * 100)  + '%';

                 return false;
             }


            document.onmouseup = function () {
                document.onmousemove = null;
                document.onmouseup = null;
            }

            return false;
        }
    }

</script>
</body>
</html>